<template>
    <div class="search-index-filter-bar">
        <div class="search-index-filter-conditions">
            <template v-for="(item0, index0) in filterList" :key="index0">
                <el-dropdown trigger="click" @command="$emit('set:filter', $event)">
                    <span class="el-dropdown-link link-font">
                        {{ `${item0.title}: ${filterList[index0].filterList[filter.getTypeVal(index0)]}` }}
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <template v-for="(item1, index1) in item0.filterList" :key="index1">
                                <el-dropdown-item :command="{ type: index0, conditions: index1 }">
                                    {{ item1 }}
                                </el-dropdown-item>
                            </template>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <el-divider direction="vertical" />
            </template>
        </div>
        <el-dropdown trigger="click" @command="$emit('set:filter', $event)">
            <span class="el-dropdown-link link-font">
                {{ `${stateFilter.title}: ${stateFilter.filterList[filter.getTypeVal(5)]}` }}
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <template v-for="(item1, index1) in stateFilter.filterList" :key="index1">
                        <el-dropdown-item :command="{ type: 5, conditions: index1 }">
                            {{ item1 }}
                        </el-dropdown-item>
                    </template>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script>
import { Filter } from '@/views/index.js'
class FilterStruct {
    title
    filterList
    constructor(title, filterList) {
        this.title = title
        this.filterList = filterList
    }
}
export default {
    props: {
        filter: {
            type: Filter,
            default: Filter.defaultFilter
        },
    },
    data() {
        const filterList = new Array(
            new FilterStruct('相关', new Array('不限', '较高', '较低')),
            new FilterStruct('发布', new Array('不限', '最近', '较早')),
            new FilterStruct('创建', new Array('不限', '最近', '较早')),
            new FilterStruct('访问', new Array('不限', '经常', '较少')),
            new FilterStruct('评分', new Array('不限', '最高', '最低'))
        )
        return {
            filterList: filterList,
            stateFilter: new FilterStruct('状态', new Array('删除', '正常', '临时', '审核', '不限'))
        }
    }
}
</script>

<style>
.search-index-filter-bar {
    padding-left: 14px;
    padding-right: 14px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: auto;
    background-color: #1E1E1E;
    position: relative;
    box-shadow: 0 2px 6px -4px black;
}

.search-index-filter-conditions {
    display: flex;
    align-items: center;
}

.search-index-filter-bar::-webkit-scrollbar {
    height: 30px !important;
}

.search-index-filter-bar::-webkit-scrollbar-thumb {
    border-radius: 2.5px;
    background: #BFBFBF !important;
}

.search-index-filter-bar::-webkit-scrollbar-track {
    background: #EFEFEF !important;
    border-radius: 2.5px;
}

.el-dropdown-link {
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    color: #A9A9A9;
}

.link-font:hover {
    color: #E0E0E0;
}
</style>